<template>
  <view class="funds">
    <view class="search">
      <view>
        <input type="text" placeholder="基金代买/名称/经理/公司等关键词" />
      </view>
    </view>
    <view class="goTo">
      <view>
        <image src="../../../static/iamges/jijin/jijinpaihang@2x.png"></image>
        <view class="text">基金排行</view>
      </view>
      <view>
        <image src="../../../static/iamges/jijin/jijinzhuhe@2x.png"></image>
        <view class="text">基金组合</view>
      </view>
      <view>
        <image src="../../../static/iamges/jijin/xinfajijin@2x.png"></image>
        <view class="text">新发基金</view>
      </view>
      <view>
        <image src="../../../static/iamges/jijin/mubiaoying.png"></image>
        <view class="text">目标盈</view>
      </view>
      <view>
        <image src="../../../static/iamges/jijin/jijinguwen@2x.png"></image>
        <view class="text">基金顾问</view>
      </view>
    </view>
    <view class="txt">
      <view class="txt3"> A股 | 创业板指 </view>
      <view> 2994.75 </view>
      <view class="txt1">
        <view class="txt2">80.64</view>
        <view>2.77%</view>
      </view>
    </view>

    <view class="carousel">
         <swiper class="swiper" indicator-dots autoplay>
            <swiper-item v-for="item in swiper" :key="item.id">
                <image :src="item.swiper1" mode=""></image>
            </swiper-item>
        </swiper>
    </view>

    <view class="optimization">
      <text class="txt1">稳健优选</text>
      <view >
        <view class="button">
          <view class="select">稳中进取</view>
          <view>安稳增值</view>
          <view>活期理财</view>
        </view>
        <text>债基打底,攻守兼备,享受股债双利</text>
      </view>

      <view class="txt2" @click="go">
        <view class="name">
          <text >广发聚鑫债券A</text>
          <text class="label">五星评级</text>
        </view>
        <view class="data">
          <view class="left">
            <view class="red">11.06%</view>
            <view>近一年收益率</view>
          </view>
          <view class="right">
            <view class="black">名匠坐镇</view>
            <view>稳健风格 前瞻配置</view>
          </view>
        </view>
      </view>

      <view  class="txt2">
        <view class="curve"/>
        <view class="name">
          <text>汇添富双利债券A</text>
          <text class="label">人气精选</text>
        </view>
        <view class="data">
          <view>
            <view class="red">11.76%</view>
            <view>近一年收益率</view>
          </view>
          <view>
            <view class="black">熨平波动</view>
            <view>震荡优选 严控回撤</view>
          </view>
        </view>
      </view>
    </view>
    </view>
</template>

<script>
	
export default {
  data() {
    return {
      swiper: [
        {
          swiper1: "../../../static/iamges/shouyelunbo@2x.png",
        },
        {
          swiper1: "../../../static/iamges/jijinlunbo@2x.png",
        },
      ],
    };
  },
  methods: {
	  go(){
		  uni.navigateTo({
		  	url:"/pages/details/details"
		  })
	  }
  },
};
</script>

<style lang="scss" scoped>
.funds{
  background-color: #fafafa;
  .search {
    height: 80rpx;
    padding: 20rpx 24rpx;
    background-color: #ff4658;
    color: #d8d8d8;
    font-size: 24rpx;
    > view {
      background-color: #ffffff;
      border-radius: 20rpx;
      input {
        background: url("../../../static/iamges/caigu/caigu-1.png") no-repeat
          10rpx border-box;
        margin-left: 30rpx;
      }
    }
  }
  .goTo {
    display: flex;
    justify-content: space-between;
    justify-content: space-around;
    margin-top: 40rpx;
    > view {
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      color: #333333;
      align-items: center;
      .text {
        padding: 24rpx 0;
      }
    }
    image {
      width: 40rpx;
      height: 50rpx;
    }
  }
  .txt {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10rpx;
    margin: 0 20rpx;
    padding: 20rpx 36rpx 20rpx;
    font-size: 24rpx;
    color: #ff4658;
    .txt3 {
      color: #333333;
    }
    .txt1 {
      display: flex;
      .txt2 {
        margin-right: 24rpx;
      }
    }
  }
  .carousel {
    margin: 20rpx 24rpx;
    .swiper {
      width: 702rpx;
      height: 200rpx;
      swiper-item {
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
        border-radius: 30rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .optimization {
    padding: 0 24rpx;
    font-size: 24rpx;
    color: #999999;
    .txt1 {
      font-size: 36rpx;
      color: #333333;
    }
    .button {
      display: flex;
      padding: 40rpx 0 24rpx;
      view {
        border: 1px solid rgba(255, 255, 255, 0);
        background-color: #eeeeee;
        border-radius: 30rpx;
        padding: 10rpx;
        margin-right: 20rpx;
        color:#333333;

      }
      .select{
              background-color: #ffd5d9;
          color:#ff909b;
      }
    }
    .txt2 {
      .name {
        font-size: 36rpx;
        color: #333333;
        padding: 44rpx 0 28rpx;
        .label {
          height: 30rpx;
          width: 120rpx;
          color: #ff4658;
          font-size: 24rpx;
          margin-left: 10rpx;
          border-radius: 10rpx;
          background-color: #ffecee;
        }
      }
      .data {
        display: flex;
        justify-content: space-between;
        padding-bottom: 32rpx;
        align-items: flex-end;
        .black {
          font-size: 36rpx;
          color: #333333;
          padding-bottom: 24rpx;
        }
        .red {
          color: red;
          font-size: 48rpx;
          padding-bottom: 24rpx;
        }
      }
      .curve {
        border-top: 2rpx solid red;
      }
    }
  }
}
</style>
